@charset "UTF-8";

/* normalize - 在某些情况下，IE10+ 不支持 <meta name="viewport"> */ 
@-ms-viewport {
    width: device-width;
}

/* normalize - html（Document） */
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;             /* 防止 Windows手机的IE浏览器 和 iOS 在旋转屏幕后调整字体大小 */
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;              /* 设置 @viewport 会导致滚动条与IE11和Edge中的内容重叠，因此强制使用非重叠、非自动隐藏的滚动条进行抵消 */
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;        /* 字体抗锯齿渲染 */
    -moz-osx-font-smoothing: grayscale;
}

/* normalize - body */
/* "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif */
body {
    margin: 0;
    font-family: "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    font-variant: tabular-nums;
    font-feature-settings: 'tnum';  /* 表格中的数字保持等宽 */
    font-size: 14px;
    line-height: 1.5715;            /* 行高 1.5715 由 22 / 14 而来，表示字体大小为 14 时，行高为 22 */
    color: #262626;
    background-color: #fff;
}

/* normalize - hr */
hr {
    box-sizing: content-box;    /* 设置 Firefox 正确的盒子大小 */
    height: 0;
    overflow: visible;          /* 显示 Edge 和 IE 的溢出内容 */
}

/* normalize - h1 ~ h6 */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 500;
}

/* normalize - a（Link） */
a {
    color: inherit;
    text-decoration: none;
    background-color: transparent;          /* 移除 IE10 激活链接时的灰色背景（remove the gray background on active links in IE 10.） */
    cursor: pointer;
    -webkit-text-decoration-skip: objects;  /* 移除 iOS8+ 和 Safari8+ 链接下划线的空白（remove gaps in links underline in iOS 8+ and Safari 8+.） */
}

/* normalize - img、video */
img,
video {
    vertical-align: middle; /* 移除 inline-block 产生的底部间隙 */
    border-style: none;     /* 移除 IE10- 链接内图像的边框 */
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

b,
strong {
    font-weight: 900;   /* bolder */
}

ol,
ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

textarea {
    resize: none;
}

input,
select,
button,
textarea {
    font: inherit;
    line-height: 1.5715;
    color: inherit;
    border: none;
    background-color: #fff;
}

/* normalize - webkit 浏览器中的元素在 foucs 下会有 outline: webkit-focus-ring-color auto 5px; 样式 */
a:focus,
input:focus,
button:focus,
textarea:focus {
    outline: none;
}

/* normalize - 清除 Firefox 自动填充 input 出现的屎黄色背景 */
input {
    filter: none;
}

/* normalize - 清除 webkit 自动填充 input 出现的背景色 —— 障眼法 */
input:-webkit-autofill,
input:focus:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 50px #fff inset;
    box-shadow: 0 0 0 50px #fff inset;
}

/* normalize - 清除 IE10+ input 文本输入控件的清除按钮（叉叉） */
input::-ms-clear,
input::-ms-reveal {
    display: none;
}

/* normalize - HTML5 标签在 IE8 及其以下默认为 inline 元素 */
nav,
main,
aside,
header,
footer,
dialog,
figure,
hgroup,
article,
section,
figcaption {
    display: block;
}


/* CSS变量 */
:root {
    /* Padding */
    --padding-base: 4px;
    --padding-xs: 8px;
    --padding-sm: 12px;
    --padding-md: 16px;
    --padding-lg: 24px;
    --padding-xl: 32px;

    /* FontFamily */
    --base-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
    --rich-font-family: 'Chinese Quote', 'Segoe UI', Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji';
    --code-font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --price-font-family: avenir-heavy, "PingFang SC", helvetica neue, arial, sans-serif;

    /* FontSize */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;

    /* LineHeight */
    --line-height-xs: 18px;
    --line-height-sm: 20px;
    --line-height-md: 22px;
    --line-height-lg: 24px;
    --line-height-xl: 28px;

    /* Border Radius */
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 8px;
    --border-radius-max: 999px;

    /* 中性色板 */
    --gray-1: #ffffff;
    --gray-2: #fafafa;
    --gray-3: #f5f5f5;
    --gray-4: #f0f0f0;
    --gray-5: #d9d9d9;
    --gray-6: #bfbfbf;
    --gray-7: #8c8c8c;
    --gray-8: #595959;
    --gray-9: #434343;
    --gray-10: #262626;
    --gray-11: #1f1f1f;
    --gray-12: #141414;
    --gray-13: #000000;

    /* 黑色色板：可用于浅色背景下 */
    --black-1: rgba(0, 0, 0, 0.02);
    --black-2: rgba(0, 0, 0, 0.04);
    --black-3: rgba(0, 0, 0, 0.06);
    --black-4: rgba(0, 0, 0, 0.15);
    --black-5: rgba(0, 0, 0, 0.25);
    --black-6: rgba(0, 0, 0, 0.45);
    --black-7: rgba(0, 0, 0, 0.65);
    --black-8: rgba(0, 0, 0, 0.85);

    /* 白色色板：可用于深色背景下 */
    --white-1: rgba(0, 0, 0, 0.04);
    --white-2: rgba(0, 0, 0, 0.08);
    --white-3: rgba(0, 0, 0, 0.12);
    --white-4: rgba(0, 0, 0, 0.20);
    --white-5: rgba(0, 0, 0, 0.30);
    --white-6: rgba(0, 0, 0, 0.45);
    --white-7: rgba(0, 0, 0, 0.65);
    --white-8: rgba(0, 0, 0, 0.85);

    /* 主题色板 */
    --primary-1: #fff4e6;
    --primary-2: #ffd6a3;
    --primary-3: #ffbf7a;
    --primary-4: #ffa552;
    --primary-5: #ff8929;
    --primary-6: #fe6a00;
    --primary-7: #d95300;
    --primary-8: #b33e00;
    --primary-9: #8c2c00;
    --primary-10: #661d00;
    --primary-color: var(--primary-6);
}


/* global - 浮动 */
.fl { float: left; }
.fr { float: right; }
.clearfix { zoom: 1; }  /* IE */
.clearfix::before,
.clearfix::after { content: ''; display: block; }
.clearfix::after { clear: both; }

/* global - 元素内容水平对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify {
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-ideograph;  /* IE */
  font-size: 0;                   /* 见 .text-justify::after 内的 Tip */
}
.text-justify::after {
  /*  Tip：
      Safari 16- 不支持 text-align-last
      由于伪类的 inline-block 会使 text-justify 元素产生一行空白间距，所以设置了 font-size 为 0 来消除此间距，可单独设置子元素的 font-size 复原字体
  */
  content: '';
  display: inline-block;
  width: 100%;
}

/* global - 文本省略 */
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.text-ellipsis--l2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.text-ellipsis--l3 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* global - 禁止选择 */
/* Tip：IE6-9使用标签属性 onselectstart="return false;" */
.disable-select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}


/**
 * Iconfont 阿里图标库（https://www.iconfont.cn/）
 * 项目名：亿动 - 编程狮 - Web
 */
 @font-face {
  font-family: 'i-icon';
  src: url('./iconfont/iconfont.woff2') format('woff2'),
       url('./iconfont/iconfont.woff') format('woff');
}
.i-icon {
  display: inline-block;
  font-family: 'i-icon';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Iconfont - a */
.i-icon-adduser-circle::before { content: '\e719'; }
.i-icon-alipay::before { content: '\e60a'; }
.i-icon-ant-credit-pay::before { content: '\e697'; }
.i-icon-arrow-up::before { content: '\e61f'; }
.i-icon-arrow-left::before { content: '\e955'; }
.i-icon-arrow-right::before { content: '\e954'; }
.i-icon-arrow-down::before { content: '\e953'; }
.i-icon-arrowdown::before { content: '\e7ee'; }
.i-icon-arrowleft::before { content: '\e956'; }

/* Iconfont - b */
.i-icon-battle::before { content: '\e7b3'; }
.i-icon-battle-o::before { content: '\e7b2'; }
.i-icon-book::before { content: '\e602'; }
.i-icon-bulb::before { content: '\e613'; }

/* Iconfont - c */
.i-icon-calculator::before { content: '\e612'; }
.i-icon-check::before { content: '\e7fc'; }
.i-icon-checked::before { content: '\e61e'; }
.i-icon-child::before { content: '\e818'; }
.i-icon-clear::before { content: '\e62a'; }
.i-icon-clear-o::before { content: '\e651'; }
.i-icon-close::before { content: '\e65a'; }
.i-icon-close-circle::before { content: '\e69b'; }
.i-icon-cloud-download::before { content: '\e7d9'; }
.i-icon-code::before { content: '\e63a'; }
.i-icon-code-outline::before { content: '\e660'; }
.i-icon-comment::before { content: '\e64e'; }
.i-icon-compress::before { content: '\e6dc'; }
.i-icon-correct::before { content: '\e8af'; }

/* Iconfont - d */
.i-icon-date::before { content: '\e6ff'; }
.i-icon-day-mode::before { content: '\e653'; }
.i-icon-device-mobile::before { content: '\e637'; }
.i-icon-device-pad::before { content: '\e638'; }
.i-icon-down::before { content: '\e60b'; }

/* Iconfont - e */
.i-icon-edit::before { content: '\e7e1'; }
.i-icon-exclamation-circle::before { content: '\e785'; }
.i-icon-exercise::before { content: '\e619'; }
.i-icon-exercise-circle::before { content: '\e812'; }
.i-icon-expand::before { content: '\e6db'; }
.i-icon-eye::before { content: '\e78f'; }
.i-icon-eye-close::before { content: '\e8ff'; }
.i-icon-eye-search::before { content: '\e636'; }

/* Iconfont - f */
.i-icon-file-checked::before { content: '\e614'; }
.i-icon-fire-o::before { content: '\e649'; }
.i-icon-flag::before { content: '\e622'; }
.i-icon-flag-bias::before { content: '\e601'; }

/* Iconfont - g */
.i-icon-game-circle::before { content: '\e815'; }
.i-icon-good::before { content: '\e63e'; }
.i-icon-good-o::before { content: '\e63c'; }
.i-icon-gift::before { content: '\e632'; }
.i-icon-github-circle::before { content: '\e885'; }
.i-icon-guide::before { content: '\e810'; }

/* Iconfont - h */
.i-icon-help::before { content: '\e60f'; }
.i-icon-horn::before { content: '\e645'; }
.i-icon-horn-o::before { content: '\e72b'; }

/* Iconfont - i */
.i-icon-info::before { content: '\e642'; }
.i-icon-ios-call::before { content: '\e782'; }
.i-icon-ios-contact::before { content: '\e781'; }
.i-icon-ios-home::before { content: '\e79b'; }

/* Iconfont - j */
/* Iconfont - k */
/* Iconfont - l */
.i-icon-left::before { content: '\e609'; }
.i-icon-link::before { content: '\e7e2'; }
.i-icon-liwutubiao::before { content: '\e643'; }
.i-icon-loading::before { content: '\e7a6'; }
.i-icon-lock-o::before { content: '\e7ca'; }
.i-icon-locked::before { content: '\e630'; }
.i-icon-logout::before { content: '\e711'; }

/* Iconfont - m */
.i-icon-md-arrow-dropup::before { content: '\e80a'; }
.i-icon-md-arrow-dropdown::before { content: '\e807'; }
.i-icon-md-arrow-dropleft::before { content: '\e808'; }
.i-icon-md-arrow-dropright::before { content: '\e809'; }
.i-icon-menu::before { content: '\e60d'; }
.i-icon-mianfeishixue::before { content: '\e644'; }
.i-icon-mobile::before { content: '\e799'; }
.i-icon-more::before { content: '\e60e'; }

/* Iconfont - n */
.i-icon-next::before { content: '\e771'; }
.i-icon-next-section::before { content: '\e63b'; }
.i-icon-night-mode::before { content: '\e640'; }
.i-icon-note::before { content: '\e623'; }
.i-icon-notice::before { content: '\e731'; }
.i-icon-notice-o::before { content: '\e732'; }

/* Iconfont - o */
/* Iconfont - p */
.i-icon-pause::before { content: '\e617'; }
.i-icon-pc::before { content: '\e611'; }
.i-icon-play::before { content: '\e615'; }
.i-icon-play-circle::before { content: '\e604'; }
.i-icon-play-simple::before { content: '\e64a'; }
.i-icon-prev::before { content: '\e772'; }
.i-icon-prev-section::before { content: '\e952'; }

/* Iconfont - q */
.i-icon-qq-circle::before { content: '\e795'; }

/* Iconfont - r */
.i-icon-refresh::before { content: '\e600'; }
.i-icon-replay::before { content: '\e603'; }
.i-icon-resume::before { content: '\e712'; }
.i-icon-right::before { content: '\e608'; }
.i-icon-rocket-circle::before { content: '\e814'; }

/* Iconfont - s */
.i-icon-search::before { content: '\e63d'; }
.i-icon-search-grey-copy::before { content: '\e957'; }
.i-icon-setting::before { content: '\e713'; }
.i-icon-setting-o::before { content: '\e714'; }
.i-icon-share::before { content: '\e7e7'; }
.i-icon-share-circle::before { content: '\e63f'; }
.i-icon-star::before { content: '\e86a'; }
.i-icon-star-outline::before { content: '\e7df'; }
.i-icon-stop::before { content: '\e616'; }

/* Iconfont - t */
.i-icon-target::before { content: '\e648'; }
.i-icon-topic::before { content: '\e629'; }

/* Iconfont - u */
.i-icon-unlock-o::before { content: '\e7c9'; }
.i-icon-up::before { content: '\e60c'; }
.i-icon-user::before { content: '\e7ae'; }

/* Iconfont - v */
.i-icon-video::before { content: '\e605'; }
.i-icon-video-code::before { content: '\e610'; }
.i-icon-vip::before { content: '\e720'; }

/* Iconfont - w */
.i-icon-w3cschool-audio::before { content: '\e620'; }
.i-icon-w3cschool-codecamp::before { content: '\e61d'; }
.i-icon-w3cschool-column::before { content: '\e641'; }
.i-icon-w3cschool-content::before { content: '\e628'; }
.i-icon-w3cschool-course::before { content: '\e624'; }
.i-icon-w3cschool-option::before { content: '\e627'; }
.i-icon-w3cschool-package::before { content: '\e626'; }
.i-icon-w3cschool-question::before { content: '\e625'; }
.i-icon-w3cschool-text::before { content: '\e906'; }
.i-icon-wallet::before { content: '\e606'; }
.i-icon-wechat-circle::before { content: '\e792'; }
.i-icon-weibo-circle::before { content: '\e798'; }
.i-icon-wxpay::before { content: '\e607'; }

/* Iconfont - x */
/* Iconfont - y */
/* Iconfont - z */